<template>
  <div>
    <el-dialog title="查询参数" :close-on-click-modal="false" :visible.sync="visible" center append-to-body>
      <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>

      <el-form>
        <el-row>
          <el-col :span="24">
            <el-form-item label="参数名称" label-width="100px">
              <el-input v-model="paramsName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>


      <el-row :gutter="30">
        <el-col :span="9">
          <div>看板中的数据集/查询</div>
          <div style="height: 350px;border: solid 1px #999;overflow-y: auto;padding: 0 15px;">
            <div v-for="(datasetItem,datasetIndex) in datasetTree" :key="datasetIndex">
              <div class="dataset-header" @click="datasetClickHandle(datasetItem)">
                <i class="el-icon-caret-right" v-if="!datasetItem.show"></i>
                <i class="el-icon-caret-bottom" v-if="datasetItem.show"></i>
                <span>{{datasetItem.name}}</span>
              </div>
              <div class="dataset-select" v-if="datasetItem.show">
                <div v-for="(selectItem,selectIndex) in datasetItem.selects" :key="selectIndex">
                  <div v-if="!selectItem.disabled" @dblclick="selectClickHandle(datasetItem,selectItem)">
                    <el-button type="text">{{selectItem.name}}</el-button>
                  </div>
                  <div v-else>
                    <el-button type="text" disabled>{{selectItem.name}}</el-button>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </el-col>
        <el-col :span="6"></el-col>
        <el-col :span="9">
          <div>参数关联上的列</div>
          <div style="height: 350px;border: solid 1px #999;padding: 0 15px;">
            <div v-for="(columnItem,columnIndex) in columnList" :key="columnIndex" @click="columnClickHandle(columnItem.datasetId,columnItem.column,columnIndex)">
              <el-button type="text">[{{columnItem.name}}].[{{columnItem.column}}]</el-button>
            </div>
          </div>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visible = false">取 消</el-button>
        <el-button type="primary" v-prevent-re-click @click="saveParams">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getValues, widgetList, getDataSetOne } from '@/api/cboard/cboard'

  export default {
    data() {
      return {
        visible: false,
        about: '',
        type: '',
        paramsIndex: '',
        insideParamsIndex: '',
        paramsData: {},
        widgetIdList: [],
        datasetIdList: [],
        datasetTree: [],
        selects: [],
        columnList: [],
        paramsName: ''
      }
    },
    components: {},
    computed: {
      ...mapGetters(['bizData'])
    },
    methods: {
      init(about,type,index,insideIndex,rowData,list){
        this.visible = true
        this.datasetIdList = []
        this.datasetTree = []
        this.selects = []
        this.columnList = []
        let rowDataStr = JSON.stringify(rowData)

        this.about = about
        this.type = type
        this.paramsIndex = index
        this.insideParamsIndex = insideIndex
        this.widgetIdList = list
        this.paramsData = JSON.parse(rowDataStr)

        if(type == 'update'){
          this.paramsName = JSON.parse(rowDataStr).name
          this.columnList = JSON.parse(rowDataStr).col
        }
        this.$nextTick(() => {
          this.getdatasetIdList()
        })

      },
      // 获取看板中的数据集
      getdatasetIdList(){
        widgetList({}).then(response => {
          let responseData = response.data
          this.widgetIdList.forEach(item => {
            responseData.find(resItem => {
              if(resItem.id == item && this.datasetIdList.indexOf(resItem.data.datasetId) == -1){
                this.datasetIdList.push(resItem.data.datasetId)
              }
            })
          })

          this.datasetIdList.forEach(item => {
            getDataSetOne(item).then(result => {
              let resultData = result.data
              let obj = {
                show: false,
                id: resultData.id,
                name: resultData.name,
                selects: []
              }
              let selects = JSON.parse(result.data.data).selects
              selects.forEach(selectItem => {
                let selectObj = {
                  disabled: false,
                  name: selectItem
                }
                for(let i = 0; i < this.columnList.length;i++){
                  if(this.columnList[i].column == selectItem){
                    selectObj.disabled = true
                  }
                }
                obj.selects.push(selectObj)
              })
              this.datasetTree.push(obj)
            })
          })
        })
      },
      // 点击数据集
      datasetClickHandle(row){
        row.show = !row.show
      },
      selectClickHandle(row,rowItem){
        rowItem.disabled = true
        let obj = {
          datasetId: row.id,
          name: row.name,
          column: rowItem.name
        }
        this.columnList.push(obj)
      },
      columnClickHandle(id,name,index){
        this.columnList.splice(index,1)
        this.datasetTree.forEach(item => {
          if(item.id == id){
            item['selects'].find(selectItem => {
              if(selectItem.name == name){
                selectItem.disabled = false
              }
            })
          }
        })
      },
      // 保存参数
      saveParams(){
        let timestamp = new Date().getTime()
        if(this.paramsName){
          let list = []
          let col = []
          if(this.columnList.length){
            this.columnList.forEach(item => {
              col.push(item)
              let form = {
                datasetId: item.datasetId,
                colmunName: item.column
              }
              getValues(form).then(result => {
                list.push(result.data)
              })
            })
          }
          this.paramsData.timestamp = (this.paramsData.timestamp) ? this.paramsData.timestamp : timestamp
          this.paramsData.col = col
          this.paramsData.name = this.paramsName
          this.paramsData.selects = list
          this.paramsData.paramType = 'selector'
          this.paramsData.type = '='
          this.paramsData.values = []

          this.visible = false
          this.$emit('refreshParams',{about: this.about,type: this.type,index: this.paramsIndex,insideIndex: this.insideParamsIndex,rowData: this.paramsData})

        }else{
          this.$message.warning('请输入参数名称')
        }

      }

    }
  }
</script>

<style lang="scss" scoped>
  .dataset-header {
    font-weight: 600;
    color: 000;
  }
  .dataset-select {
    margin-left: 30px;
  }
</style>
